<template>
    <div>

        <div style="margin-bottom:5px;">
            <el-input v-model="doctorName" placeholder="医生" style="width:200px;" @keyup.enter.native="loadPost"></el-input>
            <el-button type="primary" style="margin-left:5px;" @click="loadPost">查询</el-button>
            <el-button type="success" @click="resetParam">重置</el-button>
            <el-button type="primary" @click="add">新增</el-button>

        </div>
        <el-table :data="tableData"
                  :header-cell-style="{background: '#f3f6fd',color:'#555'}">
            <el-table-column v-if="false" prop="id" label="编码" width="120">
            </el-table-column>
            <el-table-column prop="doctorName" label="医生" width="200">
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="100">
            </el-table-column>
            <el-table-column prop="position" label="职位" width="200">
            </el-table-column>
            <el-table-column prop="workDate" label="出诊日期" width="200">
            </el-table-column>
            <el-table-column prop="workTime" label="出诊时段" width="200">
            </el-table-column>
            <!-- 操作列 -->
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="deleteRow(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">

        </el-pagination>
        
        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="80%"
            center>
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="医生">
                    <el-select
                            v-model="form.doctorId"
                            filterable
                            clearable
                            placeholder="请输入或选择..."
                    >
                        <el-option
                                v-for="item in doctorData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="出诊日期">
                    <el-col :span="20">
                        <el-date-picker v-model="form.workDate"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="出诊时段">
                    <el-radio-group v-model="form.workTime">
                        <el-radio label="上午">上午</el-radio>
                        <el-radio label="下午">下午</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="号源数量" prop="quantity">
                    <el-col :span="20">
                        <el-input v-model="form.quantity"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import ApiService from "@/apiService";

export default {
    name: 'DoctorWork',

    props: {
        item: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            tableData: [],
            doctorData: [],
            pageSize:20,
            pageNum:1,
            total:0,
            departmentId:'',
            doctorName:'',
            centerDialogVisible:false,
            form:{
                doctorId:'',
                workDate:'',
                workTime:'',
                quantity:'',
            },
            rules:{
            }

        }
    },

    methods:{
        add(){
            this.centerDialogVisible = true
        },

        save(){
            this.$refs.form.validate((valid)=>{
                if(valid){
                    this.saveOrUpdate();
                }else{
                    console.log('error submit!!')
                    return false;
                }
            });

            
        },

        async saveOrUpdate(){
            const response = await ApiService.post('/doctor/addWork', this.form);
            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.centerDialogVisible = false
                this.loadPost()
            }else{
                this.$message({message:"失败",type:'error'})
            }
        },
        //删除功能
        async deleteRow(id){
            const response = await ApiService.get('/doctor/delWork?id='+id);
            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.loadPost()
            }else{
                this.$message({message:response.msg,type:'error'})
            }
        },


        resetForm(){
            this.$refs.form.resetFields();
        },

        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageNum=1
        this.pageSize=val
        this.loadPost()
        },
        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum=val
        this.loadPost()
        },

        resetParam(){
            this.doctorName='';
        },

        async loadPost(){
            const response = await ApiService.post('/doctor/workPage', {
                pageSize:this.pageSize,
                pageNum:this.pageNum,
                param:{
                    name:this.doctorName,
                    departmentId:this.item.departmentId,
                }
            });

            if(response.code===200){
                this.tableData=response.data
                this.total=response.total
            }else{
                alert('获取数据失败')
            }
        },
        async loadDoctors(){
            const response = await ApiService.get('/doctor/list?departmentId=' + this.item.departmentId);

            if(response.code===200){
                this.doctorData=response.data
            }else{
                alert('获取数据失败')
            }
        }
    },

    beforeMount(){
        console.log(this.item.departmentId);
        this.loadPost()
        this.loadDoctors()
    }
}
</script>


<style scoped>

</style>
